<template>
  <div id="app">
    <headers @showFullScreen="showFullScreen" v-if="showHeader" />
    <transition name="fade" mode="out-in">
      
      <router-view />
    </transition>
  </div>
</template>
<script>
import headers from "@/components/headers.vue";
export default {
  components: {
    headers,
  },
  data() {
    return {
      transitionName: "slide-left",
      showHeader:false
    };
  },
  created() {
    this.getRadomRate();
    window.addEventListener("resize", () => {
      this.getRadomRate();
    });
  },
  watch: {
    $route(to) {
       if(to.path == '/login' || to.path == '/forgetPwd' || to.path == '/test'){
         this.showHeader = false;
       }
       else{
         this.showHeader = true;
       }
    },
  },
  methods: {
    getRadomRate(val) {
      let width = document.documentElement.clientWidth; // 可见区域宽度
      let height = 0;
      if (val) {
        height = document.documentElement.clientHeight;
      } else {
        height = document.documentElement.clientHeight - 60; // 内容可见区域高度
      }
      let radomRate = 1920 / 1080 / (width / height);
      this.$store.commit("setRadomRage", radomRate);
    },
    showFullScreen(val) {
      setTimeout(() => {
        this.getRadomRate(val);
      }, 150);
    },
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
html {
  width: 100%;
  font-size: 5.208333vw;
}
body {
  font-size: 0.16rem;
  min-width: 1000px;
  padding-right: 0px !important;
  overflow-y:hidden;
  margin:0 !important;
}
ul li {
  list-style: none;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.app-container {
  padding: 30px;
  overflow-y: auto;
  height:calc(100vh - 110px);
}
.app-content{
  height:calc(100vh - 130px);
}
.el-form-item__label {
  font-weight: 700;
}
.el-table .el-table__fixed-header-wrapper th,
.el-table .el-table__header-wrapper th {
  word-break: break-word;
  background-color: #f8f8f9;
  color: #515a6e;
  height: 40px;
  font-size: 13px;
}
.addItem {
  margin-bottom: 25px;
}
.is-active .el-submenu__title i {
  color: rgb(255, 208, 75);
}
.el-select {
  width: 100%;
}
.pagination{
  float:right;
  margin-top:20px;
}
.anchorBL{
  display: none;
}
textarea{
  resize: none !important;
}
.ellipsis1{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ellipsis2{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}
  /* 定义滚动条样式 */
  /* ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0.1);
  } */
 
/*定义滚动条轨道 内阴影+圆角*/
/* ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(240, 240, 240, 0.5);
  border-radius: 10px;
  background-color: rgba(240, 240, 240, .5);
}
  */
/*定义滑块 内阴影+圆角*/
/* ::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  background-color: rgba(240, 240, 240, .5);
} */
</style>
